<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />
    <style>
         #nrdvMsgBox{
			z-index: 99999;
		}
		#nrShowBolightBox{
			z-index: 9999;
		}
    </style>
    <![endif]-->
    <title>结果</title>
</head>
<body>
	<div class="classifiedBox">
	    <div class="classified-search">
            <form class="form-horizontal" style="margin-bottom: 5px;">
                <fieldset>
                  	<div class="control-group">
	                    <div class="controls">
	                    	<p style="float: left;line-height: 34px;">日期范围：</p>
	                    	<div class="input-prepend input-group" style="float: left;width:150px ;">
		                     	<span class="add-on input-group-addon">
		                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
		                     	</span>
		                     	<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" /> 
	                    	</div>
	                    	<p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
	                    </div>
                    </div>
                </fieldset>
            </form>
		    <div class="product-classification nohidden">
		        <div class="productR">产品分类：</div>
		        <div class="productL">
	                <ul class="productOne">
	                	<div>
	                		<p >请选择科目</p>
	                		<img src="../../img/spread.png">
	                	</div>
	                	<li>
	                	    <span >医学高级职称（正高）</span>
	                	    <span>医学高级职称（副高）</span>
	                	</li>
	                </ul>
	                <p>—</p>
	                <ul class="productTwo">
	                	<div>
	                		<p>--</p>
	                		<img src="../../img/spread.png">
	                	</div>
	                	<li>
	              
	                	</li>
	                </ul>
	                <p class="three" style="display: none;">—</p>
	                <ul class="productThree" style="display: none;">
	                	<div>
	                		<p>--</p>
	                		<img src="../../img/spread.png">
	                	</div>
	                	<li>
	              
	                	</li>
	                </ul>
	            </div>
		    </div>
		    <div class="selection-classification">
	            <div class="selectionR">功能选择：</div>
	            <div class="selectionL">
	            	<span id="0" class="selected">所有模式</span>
	                <span id="1">浏览模式</span>
	                <span id="2">练习模式</span>
	                <i>（*单选）</i>
	            </div>
		    </div>
	        <div class="purchase-situation">
	                   人群分类：
            <span class="selected" id="2">合计</span><span id="1">购买用户</span><span id="0">未购买用户</span>（*单选）
	        </div>
	        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
		        <!--<div class="refresh">
		            <img src="../../img/refresh.png" alt="">
		            <a class="tabReload" href="#">刷新当前</a>
		        </div>-->
		</div>
    </div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
    
    <div class="panel-body" style="display: none;">
    	<div class="titleNum"></div>
    	<div class="title" style="width:100%">
    		<ul class="title1" >
    			<li class="list1">收藏题数量占比图</li>
    			<li id="main1" class="main">
    			</li>
    		</ul>
    		<ul class="title2" >
    			<li class="list1">收藏题数量趋势图</li>
    			<li id="main" class="main">
    			</li>
    		</ul>
    	</div>
    </div>
    
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
    <!--<script src="../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../js/base/echarts.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>

    <script type="text/javascript">
    	
	    var myDate = new Date();//添加日期
           	y=myDate.getFullYear(); 
           	m=myDate.getMonth()+1;
           	d=myDate.getDate()-1;
           	if(myDate.getDate()==1){
           		 d=myDate.getDate();
           	}
           	dqy=y+"-"+m+"-"+d;
           	$('#reservation').val(dqy+" - "+dqy)
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                        // startDate: moment().startOf('day'),  
                        //endDate: moment(),  
                        //minDate: '01/01/2012',    //最小时间  
                        maxDate : moment(), //最大时间   
                        dateLimit : {  
                            days : 60  
                        }, //起止时间的最大间隔  
                        showDropdowns : true,  
                        showWeekNumbers : false, //是否显示第几周  
                        timePicker : false, //是否显示小时和分钟  
                        timePickerIncrement : 60, //时间的增量，单位为分钟  
                        timePicker12Hour : false, //是否使用12小时制来显示时间  
                        ranges : {  
                            //'最近1小时': [moment().subtract('hours',1), moment()],  
                            '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                            '最近7日': [moment().subtract('days', 6), moment()],
                            '最近30日': [moment().subtract('days', 29), moment()],  
                            '最近60日': [moment().subtract('days', 59), moment()]  
                        },  
                        opens : 'right', //日期选择框的弹出位置  
                        buttonClasses : [ 'btn btn-default' ],  
                        applyClass : 'btn-small btn-primary blue',  
                        cancelClass : 'btn-small',  
                        format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
                        separator : ' - ',  
                        locale : {  
                            applyLabel : '确定',  
                            cancelLabel : '取消',  
                            fromLabel : '从',  
                            toLabel : '到',  
                            weekLabel: 'W',
                            customRangeLabel : '选择时间',  
                            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1  
                        }  
                    }, function(start, end, label) {//格式化日期显示框  
                        $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));  
                    }); 
					
               });
           $(document).on('click','.applyBtn',function(){//判断日期是否是在60天之内
           	     var val=$('#reservation').val().split(' - ');
              	 var endTime=new Date(val[1]);
              	 var startTime=new Date(val[0]);
              	if(endTime - startTime>5270400000){
              		$('.daterangepicker').css('display','block')
              		 G_Prg.alert('每次最多选取60天',function(){
	
                    });
              	}
           })
        var clients = [];
        var clientsName = [];
		var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
    				"10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
    				"20点","21点","22点","23点"
    				];
		var hwChart;
		var swChart;
		var times=[];//两个日期之间的区间
		var menuData1 = G_Prg.getSoftMenuData().Childs[0];
		var menuData2 = G_Prg.getSoftMenuData().Childs[1];
        this.init = function(){
            var option = {};
            var dd=new Date();
            var m=dd.getMonth()+1;
            var d1=dd.getDate();
            //var d2=dd.getDate();
            var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
            var days2=  dd.getFullYear()+'-'+m+'-'+d1;
            $('#logmin').val(days1);
            $('#logmax').val(days1);
            allclick();//点击事件

        }

        /**************************************************
         * 功能：点击事件
         * 函数名：allclick（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-13
         *************************************************/
        function allclick() {
            //刷新页面
            $('.refresh').on('click',function(){
                window.location.reload();
            })
            //1.所有功能选择
            $('.selectionL span').on('click',function(){
				   if($(this).hasClass('selected')){
                       $(this).removeClass('selected');
                   }else{
                       $(this).addClass('selected').siblings().removeClass('selected');
                   }
            })
            //2.切换情况选项
            $('.purchase-situation span').on('click',function(){
                if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                }else{
                    $(this).addClass('selected').siblings().removeClass('selected');
                }
            })
            //3.1科目分层选择
            $('.productOne div').on('click',function(event){
        	    var liHeight=$('.productOne li span').length*34+'px';
        	    event.stopPropagation();
        		if($('.productOne li').css('height')=='1px'||$('.productOne li').css('height')=='0px'){
        			$('.productOne li').css({'border':'1px solid #e0e0e0','border-top':'none','height':liHeight});
        			$('.productOne div img').attr('src','../../img/packUp.png');
        		}else{
        		    $('.productOne li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
        		    $('.productOne div img').attr('src','../../img/spread.png');
        		}
        	})
        	$('.productOne li span').on('click',function(event){
        		event.stopPropagation();
        		$('.productOne div p').attr('id',$(this).attr('id'));
        	    $('.productOne div p').html($(this).html());
        	    $('.productOne li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
        		$('.productOne div img').attr('src','../../img/spread.png');
        		//第一层的目录列表选择
        		switch($('.productOne div p').html()){
					case '医学高级职称（正高）':
						$('.productTwo li').empty();
						addData(menuData1);//传送数据
						break;
					case '医学高级职称（副高）':
						$('.productTwo li').empty();
						addData(menuData2);//传送数据
						break;
			    }
        	})
			//3.2科目分层选择
	        $(document).on('click','.productTwo div',function(event){
	    		event.stopPropagation();
	    	    var liHeight=$('.productTwo li span').length*34+'px';
	    		if($('.productTwo li').css('height')=='1px'||$('.productTwo li').css('height')=='0px'){
	    			$('.productTwo li').css({'border':'1px solid #e0e0e0','border-top':'none','height':liHeight});
	    			$('.productTwo div img').attr('src','../../img/packUp.png');
	    			if($('.productTwo li span').length>=6){
	    				$('.productTwo li').css({'overflow-y':'scroll','height':6*34+'px'})
	    			}
	    		}else{
	    		    $('.productTwo li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
	    		    $('.productTwo div img').attr('src','../../img/spread.png');
	    		}
	    	})
	        //3.3最后一层目录列表
	        $(document).on('click','.productThree div',function(event){
	    		event.stopPropagation();
	    	    var liHeight=$('.productThree li span').length*34+'px';
	    		if($('.productThree li').css('height')=='1px'||$('.productThree li').css('height')=='0px'){
	    			$('.productThree li').css({'border':'1px solid #e0e0e0','border-top':'none','height':liHeight});
	    			$('.productThree div img').attr('src','../../img/packUp.png');
	    			if($('.productThree li span').length>=6){
	    				$('.productThree li').css({'overflow-y':'scroll','height':6*34+'px'})
	    			}
	    		}else{
	    		    $('.productThree li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
	    		    $('.productThree div img').attr('src','../../img/spread.png');
	    		}
	    	})
	        $(document).on('click','.productThree li span',function(event){
	    		event.stopPropagation();
			    $('.productThree div p').html($(this).html());
			    $('.productThree div p').attr('id',$(this).attr('id'));
			    $('.productThree li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
				$('.productThree div img').attr('src','../../img/spread.png');
	    		
	    	})
	        //查询结果
	        $('#btncx').on('click',function(){
	        	if($('.productThree').css('display') == 'none'){
	        		G_Prg.alert('请选择科目再去查询！')
	        	}else {
	        		var val=$('#reservation').val().split(' - ');
		            var startTime=new Date(val[0]);
		            var endTime=new Date(val[1]);
		            if(endTime-startTime<5270400000){
		                $('.loadingimg').show();
		            	$('.panel-body').hide();
		            	setTimeout(function(){
		            		$('.panel-body').show();
		                    getDenfenceData();
		                    window.onresize = function () {
						        swChart.resize();
						    }
		            	},500)
		            }else{
		           		G_Prg.alert('每次最多选取60天');
		            }
	        	}
	            
	        })
        }
       
        
        //第二层的目录列表
        function addData(menuData){
        	var menuChild = menuData.Childs;
        	var ulist ='';
        	for(var i=0;i<menuChild.length;i++){
	        	if(!menuData){
		    	 	$('.productTwo div p').html(menuChild[0].Name);
		    	    $('.productTwo div p').attr('id',menuChild[0].AppEName);
			    	ulist = '<span id='+menuChild[i].AppEName+'>'+menuChild[i].Name+'</span>';
			    }else{
			    	$('.productTwo div p').html(menuChild[0].Name);
			    	ulist = '<span id="'+i+'">'+menuChild[i].Name+'</span>';
			    	$('.productTwo li').append(ulist);
			    	
			    }
        	}
        	if(menuData){menuClick(menuChild)}
        }
        //第三层列表展示
        function menuClick(menuChild){
        	$(document).on('click','.productTwo li span',function(event){
        		var curIndex = $(this).attr('id');
        		var lastMenu =menuChild[curIndex].Childs;
        		$('.productThree li').empty();
        		for(var i=0;i<lastMenu.length;i++){
        			$('.productThree div p').attr('id',lastMenu[0].AppEName);
        			$('.productThree div p').html(lastMenu[0].Name);
			    	ulist = '<span id="'+lastMenu[i].AppEName+'">'+lastMenu[i].Name+'</span>';
			    	$('.three').css('display','block');
			    	$('.productThree').css('display','block');
			    	$('.productThree li').append(ulist);
        		}
        		event.stopPropagation();
			    $('.productTwo div p').html($(this).html());
			    $('.productTwo div p').attr('id',$(this).attr('id'));
			    $('.productTwo li').css({'height':'0px','border':'1px solid #fff','border-top':'none'});
				$('.productTwo div img').attr('src','../../img/spread.png');
        		
        	})
        }
        function formatDate(date) {
		    date = new Date(date);
		    var myyear = date.getFullYear();
		    var mymonth = date.getMonth()+1;
		    var myweekday = date.getDate();
		
		    if(mymonth < 10){
		        mymonth = "0" + mymonth;
		    }
		    if(myweekday < 10){
		        myweekday = "0" + myweekday;
		    }
		    return (myyear+"-"+mymonth + "-" + myweekday);
		}
		
		// 获取n天前日期
		function getNextDate(time, n){
		    var now = new Date(time); //当前日期
		    var nowDay = now.getDate(); //当前日
		    var nowMonth = now.getMonth(); //当前月
		    var nowYear = now.getFullYear(); //当前年
		
		    var preDate = new Date(nowYear, nowMonth, nowDay + n);
		    return formatDate(preDate);
		}
        /**************************************************
         * 功能：数据绘图
         * 函数名：Canvas1（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
        function Canvas1(jsonData,times,startDate,endDate){
            var result1 = {
            	name: "购买用户",
				data: []
            };
            var result2 = {
            	name: "未购买用户",
				data: []
            };
            var lineData = []; 
			var dayDiff =  parseInt(Math.abs(new Date(endDate) - new Date(startDate) ) / 1000 / 60 / 60 /24);
            for(var i =0;i<dayDiff;i++){
            	var len = jsonData.length;
            	var time = getNextDate(startDate,i);
            	
            	var flag1 = false;
				var flag2 = false;
				for(var j=0; j<len; j++) {
					if(time == jsonData[j].time) {
						for(var k=0; k<jsonData[j].list.length; k++) {
							if(jsonData[j].list[k].styleId == 1) {
								flag1 = true;
								result1.data.push(jsonData[j].list[k].number);
							}else if(jsonData[j].list[k].styleId == 2) {
								flag2 = true;
								result2.data.push(jsonData[j].list[k].number);
							}
						}
						break;
					}
				}
        		if(!flag1){
					result1.data.push(0);
				}
				if(!flag2){
					result2.data.push(0);
				}
            }
            
			console.log(result1,result2)
            // 基于准备好的dom，初始化echarts实例
            swChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            option = {
                title: {
                	x:'20',
                    text: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[
                        {
                            name:'人数',
                            textStyle:{fontWeight:'bold', color:'#3c8dbc',fontSize:16}
                        }
                    ]
                },
                grid: {
			        left: '2%',
			        bottom: '2%',
			        containLabel: true
			    },
                yAxis: {

                    type : 'value'

                },
                xAxis:[
		            {
			            type : 'category',
			            boundaryGap : false,
			            data :times
		        	}
                ],
                series: [
                	{
	                	name:result1.name,
	                    type:'line',
	                    itemStyle: {normal: {}},
	                    label: {normal: {}},
	                    data:result1.data
	                },
	                {
	                	name:result2.name,
	                    type:'line',
	                    itemStyle: {normal: {}},
	                    label: {normal: {}},
	                    data:result2.data
	                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            swChart.setOption(option);
        }
             
             
         /**************************************************
         * 功能：数据绘图(饼状图)
         * 函数名：Canvas2（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
        function Canvas2(jsonData){
        	// 基于准备好的dom，初始化echarts实例
            hwChart = echarts.init(document.getElementById('main1'));
           
            var shortPer = parseInt((jsonData.shortAnswerQuestion/jsonData.allCount)*100);
            var analysePer = parseInt((jsonData.analyseQuestion/jsonData.allCount)*100);
        	var option1 = {
			   title: {
			        text: '收藏题数量：'+jsonData.allCount+'\n简答题占比：'+shortPer+'%\n案例题占比：'+analysePer+'%',
			        x: 'center',
			        y: 'center',
			        itemGap: 20,
			        textStyle : {
			            color : 'rgba(30,144,255,0.8)',
			            fontFamily : '微软雅黑',
			            fontSize : 20,
			            fontWeight : 'normal'
			        }
			    },
			    tooltip : {
			        trigger: 'item'
			    },
			    legend: {
			        orient : 'vertical',
			        x : 'left',
			        data:['简答题','案例分析题']
			    },
			    calculable : true,
			    series : [
			        {
			            name:'访问来源',
			            type:'pie',
			            radius : ['50%', '70%'],
			            itemStyle : {
			                normal : {
			                	formatter: "{a} <br/>{b} : {c} ({d}%)",
			                    label : {
			                        show : false
			                    },
			                    labelLine : {
			                        show : false
			                    }
			                },
			                emphasis : {
			                    label : {
			                        show : true,
			                        position : 'center',
			                        textStyle : {
			                            fontSize : '20',
			                            fontWeight : 'bold'
			                        }
			                    }
			                }
			            },
			            data:[
			                {value:jsonData.shortAnswerQuestion, name:'简答题',itemStyle:{normal:{color:'#8AD8FF'}}},
			                {value:jsonData.analyseQuestion, name:'案例分析题',itemStyle:{normal:{color:'#30B5F5'}}}
			            ]
			        }
			    ]
			};
        	//使用刚指定的配置项和数据显示图表。
            hwChart.setOption(option1);
        }
        
        /**************************************************
         * 功能：答题数饼状图结果 /api/new/exerciseandcollec
         * 接口：https://tongji.ksbao.com:8003
         * 函数名：getLoginData（）
         * 传入参数： startDay:开始时间
		   endTime : 结束时间
		   appEName : 科目名称
		   pattern : 模式 [0 所有模式，1 浏览模式，2 练习模式 ]
		   userType : 用户类型
		   btnName: 功能名称（答题，收藏题）
         * 创建人：刘淳昊 2017-08-20
         *************************************************/
        function getDenfenceData(){
            var val=$('#reservation').val().split(' - ');
            var start = val[0];
            var end = val[1];
            
            var startTime=new Date(startTime);
            var endTime=new Date(endTime);
            var appEName = $('.productThree p').attr('id'); //所选科目
            var times=[];
            getAll(start,end);
            function getAll(begin,end){
			    var ab = begin.split("-");
			    var ae = end.split("-");
			    var db = new Date();
			    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
			    var de = new Date();
			    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
			    var unixDb=db.getTime();
			    var unixDe=de.getTime();
			    for(var k=unixDb;k<=unixDe;){
				times.push(G_Prg.datetimeFormat(new Date(parseInt(k)), 'yyyy-MM-dd'));
				    k=k+24*60*60*1000;
			    }
			}
            var userType = $('.purchase-situation .selected').attr('id');
            var pattern = $('.selectionL .selected').attr('id');
            var _url='/api/new/exerciseandcollec?startDay='+start+'&endDay='+end+'&appEName='+appEName+'&userType='+userType +'&pattern='+pattern+'&btnName=收藏题';
            G_AjaxApi.get(_url,false,function(json){
                var jsonData = JSON.parse(json);

                if(jsonData.status ==200){
                    if(jsonData.data.length == 0){
                        alert('数据为空');
                    }else{
                        var _data1 = jsonData.data.list;
                        var _data2 = jsonData.data.count;
						$('.loadingimg').hide();
						Canvas1(_data1,times,start,end);
                        Canvas2(_data2);
                    }

                }else{
                    console.log(jsonData.status)
                }
            })
        }
        /**********************************************************
        * 功能：获取日期区间
        * ********************************************************/
         Date.prototype.format=function (){
		    var s='';
		    s+=this.getFullYear()+'-';          // 获取年份。
		    s+=(this.getMonth()+1)+"-";         // 获取月份。
		    s+= this.getDate();                 // 获取日。
		    return(s);                          // 返回日期。
		};

    init();
    </script>
</body>
</html>